﻿<!DOCTYPE HTML>
<html th:with="title='微信用户信息管理'">
<head th:include="fragments/header :: header">
</head>
<body id="app">
	<div class="page-container">
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="r">
				<a class="btn btn-success size-L radius" href="javascript:location.replace(location.href);" title="刷新">
					<i class="Hui-iconfont">&#xe68f;</i>
					刷新
				</a>
			</span>
		</div>
		<div class="text-l pd-5">
			用户昵称：
			<input type="text" class="input-text size-M" style="width: 150px" placeholder="请输入用户昵称" id="nickName" name="nickName">
			<button type="button" class="btn btn-success size-M radius" onclick="query()">
				<i class="Hui-iconfont">&#xe665;</i>
				查询
			</button>
		</div>
		<div>
			<table class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="100">用户昵称</th>
						<th width="100">用户头像</th>
						<th width="100">用户openid</th>
						<th width="100">用户性别</th>
						<th width="100">国家</th>
						<th width="100">省份</th>
						<th width="100">城市</th>
						<th width="100">语言</th>
						<th width="200">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c" v-for="item in pageData.rows">
						<td>{{ item.nickname }}</td>
						<td>
							<img src="{{item.headimgurl}}" height="80" width="80" />
						</td>
						<td>{{ item.openid }}</td>
						<td>{{ item.sex|userInfoSex }}</td>
						<td>{{ item.country }}</td>
						<td>{{ item.province }}</td>
						<td>{{ item.city}}</td>
						<td>{{ item.language}}</td>
						<td align="center">
							<span>
								<a title="微信付款" href="javascript:;" onclick="transfers()" class="btn btn-primary size-L radius" style="text-decoration: none">
									<i class="Hui-iconfont">&#xe600;</i>
									微信付款
								</a>
							</span>
						</td>
					</tr>
				</tbody>
			</table>

			<div v-show="pageData.total > 0" class="laypage_main laypageskin_default" style="margin-top: 10px">
				<div class="l">
					<span>
						每页
						<select name="pageSizeSelect" id="pageSizeSelect" style="vertical-align: baseline !important; height: 27.6px;" onchange="query()">
							<option value="10" selected="selected">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
						条 显示 {{pageData.rowIndexStart}} 到 {{pageData.rowIndexEnd}} ，共 {{pageData.total}} 条
					</span>
				</div>
				<div id="pageNav" class="r"></div>
			</div>

		</div>
	</div>

	<script type="text/javascript">
		// ==================================================
		var app = new Vue({
			el : '#app',
			data : {
				pageData : {},
			}
		});

		/*
		 * 查询
		 */
		function query(pageNo, pageSize) {
			if (!pageNo) {
				pageNo = 1;
			}
			if (!pageSize) {
				pageSize = $("#pageSizeSelect").val();
			}
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "POST",
				url : '/manager/userInfo/queryPage',
				data : {
					pageNo : pageNo,
					pageSize : pageSize,
					search_EQ_nickName : $('#nickName').val()
				},
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						app.pageData = data;
						laypage({
							cont : 'pageNav',
							pages : data.totalPage,
							curr : data.currentPage,
							skip : true,
							groups : 6,
							jump : function(obj, first) {
								if (!first) {
									query(obj.curr);
								}
							}
						});
					} else {
						sessionCheckTimeOut(result);
					}
					setTimeout("lockMaxImg()", 500);
				}
			});
		}

		/**
		 * 微信付款
		 */
		function transfers() {
			layer_full('微信付款', '/manager/userInfo/add', '', '450');
		}

		$(function() {
			query();
		});
	</script>
</body>
</html>